<template>
  <page-card title="字典管理"
             sub-title="编辑"
             :need-back="true">

    <a-form :form="form"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol">
      <a-form-item label="ID"
                   v-show="false">
        <a-input v-decorator="['id']" />
      </a-form-item>
      <a-form-item label="字典归类" help="字典数据分类显示名称">
        <a-input allowClear
                 placeholder="请输入字典归类"
                 :maxLength="200"
                 v-decorator="['name', {
                   rules: [{
                     required: true, type:'string',transform: value => value ? value.trim() : '',message: '请输入字典归类'
                   }]
                 }]" />
      </a-form-item>
      <a-form-item label="字典编码" help="获取字典数据的编码">
        <a-input allowClear
                 placeholder="请输入字典编码"
                 :maxLength="20"
                 v-decorator="['code', {
                   rules: [{
                     required: true,transform: value => value ? value.trim() : '', message: '请输入字典编码'
                   }]
                 }]" />
      </a-form-item>

      <a-form-item label="字典类型"
                   help="字典参数为系统配置参数，业务参数为业务功能参数"
                   required>
        <a-radio-group v-decorator="['type', {
                         initialValue: '1'
                       }]"
                       :options="typeOptions" />
      </a-form-item>

      <a-form-item label="字典名称">
        <a-input allowClear
                 placeholder="请输入字典名称"
                 :maxLength="200"
                 v-decorator="['dictValue', {
                   rules: [{
                     required: true,transform: value => value ? value.trim() : '', message: '请输入字典名称'
                   }]
                 }]" />
      </a-form-item>
      <a-form-item label="字典值" help="字典数据隐藏值">
        <a-input allowClear
                 placeholder="请输入字典值"
                 :maxLength="20"
                 v-decorator="['dictKey', {
                   rules: [{
                     required: true,transform: value => value ? value.trim() : '', message: '请输入字典值'
                   }]
                 }]" />
      </a-form-item>
      <a-form-item label="排序号">
        <a-input-number style="width:100%;"
                        :min="1"
                        :max="999999999"
                        placeholder="请输入排序号"
                        v-decorator="['orderNo', {
                          rules: [{
                            required: true, message: '请输入排序号'
                          }]
                        }]" />
      </a-form-item>
      <a-form-item label="描述">
        <a-textarea :maxLength="200"
                    placeholder="请输入描述"
                    v-decorator="['remark', {
                      rules: [{
                        required: false,transform: value => value ? value.trim() : '', message: '请输入描述'
                      }]
                    }]"
                    style="resize:none; height:150px"></a-textarea>
      </a-form-item>
    </a-form>

    <a-form-item label=" "
                 :colon="false">
      <div style="text-align:center">
        <a-button type="primary"
                  action
                  @click="handleSave">保存</a-button>
      </div>
    </a-form-item>
  </page-card>
</template>

<script>

import { saveOrUpdate, getById } from '../../api/dictionary/index'
export default {

  data () {
    return {
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 }
      },
      typeOptions: [{
        label: '字典参数',
        value: '1'
      }, {
        label: '业务参数',
        value: '2'
      }],
      data: [],
      form: this.$form.createForm(this)
    }
  },
  mounted () {
    const id = this.$route.query.id
    if (id) {
      this.getById(id)
    }
  },
  methods: {
    getById (id) {
      getById(id).then((response) => {
        const values = {}
        for (const k in this.form.fieldsStore.fieldsMeta) {
          // eslint-disable-next-line no-prototype-builtins
          response.hasOwnProperty(k) && (values[k] = response[k])
        }
        this.form.setFieldsValue(values)
      })
    },
    handleSave () {
      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
        if (values.name) {
          values.name = values.name.trim()
        }
        if (values.code) {
          values.code = values.code.trim()
        }
        if (values.dictValue) {
          values.dictValue = values.dictValue.trim()
        }
        if (values.dictKey) {
          values.dictKey = values.dictKey.trim()
        }
        if (values.remark) {
          values.remark = values.remark.trim()
        }
        saveOrUpdate(values).then((response) => {
          this.message.info(
            values.id ? '字典管理修改成功' : '字典管理新增成功'
          )
          this.$router.go(-1)
        })
      })
    }
  }
}
</script>
